<template>
  <div class="trend-item" :class="{'trend-item-grey': colorful === false }" :title="title">
    <span>
      {{ title }}
    </span>
    <span :class="{'up': flag === 'up','down': flag === 'down'}">
      <Icon type="arrow-up-b" v-if="flag === 'up'"></Icon>
      <Icon type="arrow-down-b" v-if="flag == 'down'"></Icon>
    </span>
  </div>
</template>
<script>
export default {
  name: 'Trend',
  props: {
    colorful: {
      type: Boolean,
      default: true
    },
    flag: {
      type: String
    },
    title: {
      type: String
    }
  }
}
</script>
<style>
.trend-item {
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.trend-item .down,
.trend-item .up {
  margin-left: 4px;
  position: relative;
  top: 0
}

.trend-item .down i,
.trend-item .up i {
  font-size: 12px;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2)
}

.trend-item .up {
  color: #f5222d
}

.trend-item .down {
  color: #52c41a;
  top: -1px
}

.trend-item.trend-item-grey .down,
.trend-item.trend-item-grey .up {
  color: rgba(0, 0, 0, .65)
}

</style>
